<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jQuery库/jquery-2.2.4.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: pink;
        }
        
        button {}
        
        #btn {}
    </style>
    <script>
        // $(document).ready()

        // $(function() { //当页面结构加载完成之后，执行；多次
        //     $("button").click(function() {
        //         console.log(1); //
        //     })
        // })

        // $(function() { //当页面结构加载完成之后，执行；多次
        //     $("button").click(function() {
        //         console.log(2); //
        //     })
        // })

        // window.onload = function() { //当页面结构，内容，样式加载完成之后，执行；一次

        // }
    </script>
</head>

<body>
    <button id="btn">点击</button>
    <div class="outer">
        <p>p1</p>
        <div>
            <p>p2</p>
        </div>
        <p>p3</p>
    </div>
    <h1>h1</h1>
    <ul>
        <li class="test" id="txt">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li class="two">6</li>
        <li>7</li>
        <li>
            <span>span</span>
        </li>
        <li>8</li>
        <li>9</li>
    </ul>
    <div id="box"></div>

    <input type="text" autofocus="autofocus">
    <select name="" id="">
        <option value="">1</option>
    </select>
    <textarea name="" id="" cols="30" rows="10">123454</textarea>
    <input type="checkbox">

    <script>
        $("li").click(function() {
            let index = $(this).index();
            console.log(index)
        })

        // console.log($("li:has(span)", "li").context)

        // let arr = [1, 2, 3, 4]
        // $.each(arr, function(index, item) {
        //     console.log(item)
        // })

        // $("li").each(function(index, item) {
        //     console.log(item)
        // })

        // $.each();  //数据
        // $().each();//元素


        // console.log($(":input"))
        // console.log($(":text"))


        // $("li[class][id]").css("color", "red")




        // $("button")
        // $("#btn")
        // console.log($("button,div"))
        // $(".outer>p+") === $(".outer>p").next()
        //$(".outer>p~") === $(".outer>p").nextAll()
        // $("li:first")===$("li:first-child")===$("li").first()
        // $("li:last")===$("li:last-child")===$("li").last()

        // $(":header").css("color", "red");

        // $("#box").animate({
        //     width: 500
        // }, 1000)
        // console.log($(":animated"))

        // $("input").focus(function() {
        //     console.log(1)
        //     $("input:focus").css({
        //         backgroundColor: "red"
        //     })
        // })

        // $("li:contains('7')").css("color", "red")
        // console.log($("li:empty"))

        // $("li:visible").css("color", "red")
        // console.log($("li:parent"))
    </script>
</body>

</html